<!DOCTYPE html>
<html>
<head>
    <title>test</title>
   
    <script src="echarts.min.js"></script>
    <style>
        .my-button {
          width: 80px;
          height: 30px;
          margin-left: 10px;
        }
    </style>
    
</head>
<body>
    <div id="main" style="width: 600px;height:400px;border: 1px;width: 70%; margin: 0 auto;">
    
    </div>
    <div  style="width: 70%;height: 300; border: #191a19;margin: 0 auto;">
        <label>
            <label class="my-button">单页数据:
                <input type="text" id="input_nums"  placeholder="10" value="100">
            </label>
            <button id="refreshBtn"  class="my-button" onclick="fetchData()">最新</button>
        </label>
        <br />
        <br />
        <label style="margin-top: 10px;">步长:
            <input type="text" id="offset_unit" width="50px" value="10">
            <button id="refreshBtn_back" class="my-button" onclick="refreshBtn_back_cb()">向后</button>
            <button id="refreshBtn_foward" class="my-button" onclick="refreshBtn_foward_cb()">向前</button>
        </label>
    </div>
    <script type="text/javascript">
        // 在页面加载完成时执行读取缓存的动作
        window.onload = function() {
            echar_init();
        }
        
        function echar_init()
        {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            
            var  xdt = ['14', '15','16','17','18']
            var  ydt = ['140', '150','16','220','21']
            var  motordt = ['0', '1','0','1','0']
            option = show_data_format(xdt, ydt, motordt);
            option && myChart.setOption(option);
        }  
        
        // 获取并显示网址内容的函数
        function fetchData() {
            // var label = document.querySelector("label");
            var inputval = document.getElementById("input_nums");
            var url = 'plant_sql.php/ins=0?get=hist&&pagesize='+inputval.value.toString()+'&&pagenum=0';
            console.log(url);
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            fetch(url)
                .then(response => response.text())
                .then(data => {
                    // console.log(data)
                    var jsonObject = JSON.parse(data);
                    
                    var motor_data = Array(jsonObject.his_tm.length);
                    
                    options_new = show_data_format(jsonObject.his_tm, jsonObject.his_hum, motor_data);
                    // 更新图表数据
                    myChart.setOption(options_new);
                })
                .catch(error => console.log(error));
        }
        var his_data_offset = 0
        function refreshBtn_back_cb() {
            var inputval = document.getElementById("offset_unit");
            his_data_offset += parseInt(inputval.value)
            var inputval = document.getElementById("input_nums");
            var url = 'plant_sql.php/ins=0?get=hist&&pagesize='+inputval.value.toString()+'&&pagenum='+his_data_offset.toString();
            console.log(url);
            
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var  xdt1 = ['24', '25','26','27','28','29','30','31']
            var  ydt1 = ['240', '250','26','120','221','321','221','121']
            var  motordt1 = ['0', '0','0','1','0','0','1','0']
            options_new = show_data_format(xdt1, ydt1, motordt1);
            
            // fetch(url)
            //     .then(response => response.text())
            //     .then(data => {
            //         // console.log(data)
            //         var jsonObject = JSON.parse(data);
            //         var motor_data = Array(jsonObject.his_tm.length);
            //         options_new = show_data_format(jsonObject.his_tm, jsonObject.his_hum, motor_data);
            //         // 更新图表数据
                        myChart.setOption(options_new);
            //     })
            //     .catch(error => console.log(error));
        }
        function refreshBtn_foward_cb() {
            var inputval = document.getElementById("offset_unit");
            if(his_data_offset-parseInt(inputval.value) >= 0)
            {   
                his_data_offset -= parseInt(inputval.value);
            }
            else
            {
                alert("no data");
            }
            var inputval = document.getElementById("input_nums");
            var url = 'plant_sql.php/ins=0?get=hist&&pagesize='+inputval.value.toString()+'&&pagenum='+his_data_offset.toString();
            console.log(url);
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            // fetch(url)
            //     .then(response => response.text())
            //     .then(data => {
            //         // console.log(data)
            //         var jsonObject = JSON.parse(data);
            //         var motor_data = Array(jsonObject.his_tm.length);
            //         options_new = show_data_format(jsonObject.his_tm, jsonObject.his_hum, motor_data);
            //         // 更新图表数据
            //         chart.updateSeries(options_new.series);
            //         chart.updateOptions({
            //             xaxis: options_new.xaxis
            //         });
            //     })
            //     .catch(error => console.log(error));
        }

    

        
        function show_data_format( xData, yData, motor_data){
            // 创建配置对象
            var option;
            // mark_size = 0;
            var dynamic_mark_Data= [];
            for (var i = 0; i < motor_data.length; i++) {
                if(motor_data[i] == 1 ){
                
                let newData = {
                        coord: [xData[i], yData[i]],
                        symbol:"pin",
                        
                    };    
                    dynamic_mark_Data.push(newData);
                    console.log(i)
                }
            }
            
            option = {
            title: {
                text: 'humidity Change in the last some time'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {},
            toolbox: {
                show: true,
                feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                data: xData
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                formatter: '{value} %'
                }
            },
            series: [
                {
                name: 'Highest',
                type: 'line',
                // data: [10, 11, 13, 11, 12, 12, 9],
                data: yData,
                markPoint: { // markLine 也是同理
                data:dynamic_mark_Data,
                },
                }
            ]
            };
            return  option;
        }

      </script>
</body>
</html>